<!--
 * @Author: your name
 * @Date: 2022-04-19 14:31:37
 * @LastEditTime: 2022-04-20 09:34:56
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \2202\二阶段学习\week02\day05\src\消灭星星\点击删除星星.html
-->
<meta charset="UTF-8">
<style>
    *{
        padding: 0;
        margin: 0;
    }
    html,body{
        background:orange;
    }
</style>
<body>
    <div class="xuetiao" style="width: 100px;height: 50px;background: blueviolet;">
        <div class="xue" style="width: 100px;height: 50px;background: red;"></div>
    </div>
</body>
<script>
    setInterval("createStar()",1000)
    function createStar(){
        var imgObj = document.createElement('img')
        imgObj.src = 'star.gif'
        var nowwidth = Math.floor(Math.random()*(80-50+1)+50)
        imgObj.style.width = nowwidth + 'px'
        var maxLeft = (window.innerWidth || document.documentElement.clientWidth) - nowwidth
        var maxTop = (window.innerHeight || document.documentElement.clientHeight) - nowwidth
        imgObj.style.position = 'absolute'
        imgObj.style.left = Math.floor(Math.random()*(maxLeft-0+1)+0) + 'px'
        imgObj.style.top = Math.floor(Math.random()*(maxTop-0+1)+0) + 'px'
        document.body.appendChild(imgObj) 
    }
    document.body.addEventListener('click', function(evt){
        var e = evt || window.event
        if(e.target.nodeName == 'IMG')
        {
            this.removeChild(e.target)
            var xue = parseInt(document.querySelector('.xue').style.width)
            document.querySelector('.xue').style.width = xue-1 + 'px'
        }
    })
    setInterval(function(){
        var xue = parseInt(document.querySelector('.xue').style.width)
        document.querySelector('.xue').style.width = xue-1 + 'px'
    },5000)
</script>